import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import './Concern.css'

export default function Concern() {
    const navigate = useNavigate()
    const [doctor, setDoctor] = useState([
        {
            img: '../doctor.png',
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            bga: '儿童支原体感染，儿童支气管发炎，儿...',
            tag: ['标签1', '标签2'],
            score: 4.5,
            monthAnswer: 100,
            time: '五分钟内',
            picPrice: 39,
            preMedicine: 59
        },
        {
            img: '../doctor.png',
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            bga: '儿童支原体感染，儿童支气管发炎，儿...',
            tag: ['标签1', '标签2'],
            score: 4.5,
            monthAnswer: 100,
            time: '五分钟内',
            picPrice: 39,
            preMedicine: 59
        },
        {
            img: '../doctor.png',
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            bga: '儿童支原体感染，儿童支气管发炎，儿...',
            tag: ['标签1', '标签2'],
            score: 4.5,
            monthAnswer: 100,
            time: '五分钟内',
            picPrice: 39,
            preMedicine: 59
        },
    ])
    return (
        <div className='concern'>
            <div className='concern-header'>
                <h1>关注医生</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="concern-content">
                {
                    doctor.map((item, index) => {
                        return <div key={index} onClick={() => { navigate('/doctormsg') }}>
                            <div className='concern-content-item'>
                                <div className='concern-content-item-left'>
                                    <img src={item.img} alt="" />
                                    <div style={{ float: 'left', marginLeft: '10px' }}>
                                        <h2>{item.name} {item.position}</h2>
                                        <p>{item.hospital} {item.department}</p>
                                        <p>擅长:{item.bga}</p>
                                        <p>
                                            评分:<span style={{ color: 'skyblue' }}>{item.score}</span>&nbsp;
                                            月回答:<span style={{ color: 'skyblue' }}>{item.monthAnswer}</span>&nbsp;
                                            平均响应:<span style={{ color: 'skyblue' }}>{item.time}</span>
                                        </p>
                                        <h3>
                                            图文:<span style={{ color: 'red' }}>￥{item.picPrice}</span>&nbsp;
                                            开药:<span style={{ color: 'red' }}>￥{item.preMedicine}</span>
                                        </h3>
                                        <div className='tag'>
                                            {
                                                item.tag.map((item, index) => {
                                                    return <span key={index}>{item}</span>
                                                })
                                            }
                                        </div>
                                        <div className="btn">
                                            <Button color='primary'>查询医生</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
